<template>
  <div class="header border-bottom">
    <a class="header-left" href="#">
      <img class="header-left-img" src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="">
    </a>
    <div class="header-center">
      <div class="center">
        <div class="center-logo">
          <span>&#xe608;</span>
          首页
        </div>
        <div class="center-app">
          <span>&#xe608;</span>
          下载APP
        </div>
        <div class="input-box">
          <input class="center-input" type="text" placeholder="搜索" />
        </div>
      </div>
    </div>
    <div class="header-right">
      <a class="btn write-btn" href="#">写文章</a>
      <a class="btn sign-up" href="#">注册</a>
      <a class="btn log-in" href="#">登录</a>
      <div class="bata">
        <a href="#">
          <img class="bata-img" src="http://cdn2.jianshu.io/assets/web/nav_jsds_beta-eeb44d165b8ba37680fdb7e65ae17ae4.png" alt="">
        </a>
      </div>
      <div class="mode">
        Aa
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .header
    min-width: 768px;
    margin: 0 auto;
    min-height: 56px
    padding: 0 40px
    text-align: center
    .header-left
      float: left
      height: 56px
      .header-left-img
        height: 100%
    .btn
      line-height: 40px
    .header-right
      float: right
      .write-btn
        float: right
        width: 100px
        margin: 8px 12px 0
        border-radius: 20px
        font-size: 15px
        color: #fff
        background-color: #ea6f5a
      .sign-up
        float: right
        width: 80px
        height: 38px
        margin: 9px 5px 0 15px
        border: 1px solid rgba(236,97,73,.7)
        border-radius: 20px
        font-size: 15px
        color: #ea6f5a
        background-color: transparent
      .log-in
        float: right
        margin: 11px 6px 0 10px
        font-size: 14px
        padding: 0px 12px
      .bata
        float: right
        padding: 15px 0px
        margin: 0 12px
        .bata-img
          height: 25px
      .mode
        float: right
        line-height: 20px
        padding: 17px 10px
        font-size: 16px
        color: #969696
    .header-center
      width: 960px
      margin-right: auto
      margin-left: auto
      padding-left: 15px
      padding-right: 15px
      background-color: pink
      .center
        float: left
        .center-logo
          float: left
          line-height: 26px
          padding: 15px
          color: #ea6f5a
        .center-app
          float: left
          line-height: 26px;
          padding: 15px
          color: #333
        .input-box
          float: left
          height: 56px;
          line-height: 56px
          padding-left: 35px
          .center-input
            width: 320px
            padding: 0 40px 0 20px
            width: 160px
            height: 36px
            font-size: 14px
            border: 1px solid #eee
            border-radius: 40px
            background: #eee
</style>
